<template>
  <div class="panel-group">
    <div class="sigma-content">
      <div class="sigma-title">API渠道成功率</div>
      <div class="apilist-content">
        <div class="api-title">
          <span style="width: 20%;text-align:center ;">渠道</span>
          <!-- <span style="width: 13%;">标识</span> -->
          <!-- <span style="width: 15%;">对接模式</span> -->
          <!-- <span style="width: 13%;">撞库量</span> -->
          <span style="width: 15%;text-align:center ;">推送量</span>
          <span style="width: 15%;text-align:center ;">访问</span>
          <span style="width: 15%;text-align:center ;">点击</span>
          <span style="width: 15%;text-align:center ;">进件量</span>
          <span style="width: 35%;">成功率</span>
        </div>
        <div class="apilist-box">
          <div class="apilist" v-for="(item, index) in tableData" :key="item">
            <span style="width: 20%;">{{ item.channelName }}</span>
            <!-- <span style="width: 13%;">{{ item.systemCode }}</span> -->
            <!-- <span style="width: 14%;" class="overflow-text">{{
              item.model
            }}</span> -->
            <!-- <span style="width: 13%;">{{
              item.collisionNum ? item.collisionNum : '-'
            }}</span> -->
            <span style="width: 15%;">{{ item.applyNum }}</span>
            <span style="width: 15%;">{{ item.accessNum }}</span>
            <span style="width: 15%;">{{ item.clickNum }}</span>
            <span style="width: 15%;">{{ item.agencySuccNum }}</span>
            <span style="width: 35%;" class="progress-bar"
              ><el-progress
                :stroke-width="15"
                style="width: 70%;"
                :show-text="false"
                :percentage="item.succPercent"
                :color="customColorMethod(item.succPercent)"
              ></el-progress
              ><span
                :class="['percentage', item.succPercent < 75 ? 'lowColor' : '']"
                >{{ item.succPercent }}%</span
              ></span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { apiChannel } from '@/api/home';
import { timestampToTime } from '@/utils/index';
require('echarts/theme/macarons'); // echarts theme
import resize from '../components/mixins/resize';

export default {
  mixins: [resize],
  data() {
    return {
      times: [],
      timeNow: [
        new Date(new Date().toLocaleDateString()).getTime(),
        new Date(new Date().toLocaleDateString()).getTime() +
          (24 * 60 * 60 * 1000 - 1)
      ],
      listQuery: {
        startTime: '',
        endTime: ''
      },
      list: {},
      tableData: []
    };
  },
  mounted() {
    this.listQuery.startTime = timestampToTime(this.timeNow[0]);
    this.listQuery.endTime = timestampToTime(this.timeNow[1]);
    this.getApiChannel();
  },
  methods: {
    async getApiChannel() {
      const res = await apiChannel(this.listQuery);
      if (res.data.code === 200) {
        this.tableData = res.data.data;
      }
    },
    customColorMethod(percentage) {
      if (percentage < 75) {
        return '#67c23a';
      } else {
        return '#376DF7';
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.panel-group {
  // height: 570px;
  .sigma-content {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    padding: 16px;
    background-color: #ffffff;
    .sigma-title {
      width: 200px;
      font-size: 16px;
      border-left: 3px solid #376df7;
      padding: 0 4px;
      line-height: 10px;
      margin: 2px 0;
    }
    .institution-content {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: center;
      padding: 12px 0 10px 0;
      .institution {
        width: 48%;
        padding: 12px 0;
        text-align: center;
        margin-bottom: 10px;
        border-radius: 10px;
        .name {
          font-size: 14px;
        }
        .num {
          font-size: 24px;
          margin-top: 4px;
        }
      }
    }
    .apilist-content {
      padding: 6px 0;
      width: 100%;
      margin-top: 10px;
      .api-title {
        padding: 10px 0;
        border-radius: 2px;
        background-color: #f2f7ff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        color: #666666;
      }
      .apilist-box {
        max-height: 790px;
        overflow-y: auto;
      }
      .apilist {
        margin-top: 4px;
        padding: 10px 2px 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        color: #333333;
        text-align: center;
        border-bottom: 1px solid #eeeeee;
        .overflow-text {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .progress-bar {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .percentage {
            text-align: center;
            width: 30%;
            line-height: 12pxd;
          }
          .lowColor {
            color: #67c23a;
          }
        }
      }
      .apiColor {
        background-color: #f6faff;
      }
    }
  }
}
</style>
